<template>
  <div>
    <section class="pb-110" id='pricing'>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-12 col-lg-8">
            <!-- section title -->
            <div class="section-title text-center">
              <h2>指导老师</h2>
              <p></p>
            </div>
            <!-- End of section title -->
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-xl-10 col-lg-12">
            <div class="feature-carousel owl-carousel">

              <swiper :options="swiperOptions">
                <swiper-slide v-for="item in memberList" :key="item.id">
                  <!-- single feature inner -->
                  <div class="single-feature-inner text-center">
                    <div class="feature-icon"><img :src="item.img" class="svg" alt=""></div>
                    <h5>{{ item.teacherName }}<br></h5>
                    <p>{{ item.post }}</p>
                    <p>{{item.introduction}}</p>
                  </div>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </div><!--/.feature-carousel-->
          </div><!--/.col-->
        </div><!--/.row-->
      </div><!--/.container-->
    </section>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import {Api} from "~/request/Api";
export default {
  name: "teacherConductors",
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView : 3,
        loop: true,
        speed: 1000,
        spaceBetween : 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        },

        // Responsive breakpoints
        breakpoints: {
          1024:{
            slidesPerView : 3
          },
          768:{
            slidesPerView : 2
          },
          640:{
            slidesPerView : 2
          },
          320:{
            slidesPerView : 1
          }
        }
      },
      memberList: []
    }
  },
  methods: {
    async getTeacherInfo() {
      let result = await Api.getTeacherInfo();
      let res = result.data.TeacherInfo.Member
      if (result.code === 200) {
          this.memberList= res
      }
    }
  },
  mounted() {
    this.getTeacherInfo()
  }
}
</script>

<style scoped>
img{
  object-fit: cover;
}
</style>
